<template>
    <div>
        <h3>会员等级列表</h3>
        <input type="button" value="会员等级增加" class="btn btn-primary" @click="add">

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>ID</td>
                    <td>等级名称</td>
                    <td>等级权益</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.LevelName }}</td>
                    <td>{{ item.LevelRights }}</td>
                    <td>
                        <input type="button" value="修改" @click="update(item.Id)" class="btn btn-success">
                        <input type="button" value="删除" class="btn btn-danger">
                    </td>
                </tr>
            </tbody>
        </table>


    </div>


    
</template>







<script setup lang="ts">


import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

//声明一个变量存储后端返回的数据
let data:any= reactive({
    list:[]
})

//生命周期函数 相当于文档就绪函数
onMounted(()=>{
    getList();
})
//修改跳转
const update=(id:any)=>{
    router.push({
        path:'/memberLevelUpdate',
        query:{
            id:id
        }
    })
}


const add = () => {
    //跳转到会员等级增加页面
    router.push('/memberLevelAdd')
};

const getList=()=>{
    axios({
        method:'get',
        url:'/api/Member/GetMemberLevelList',
    })
    .then(res=>{
        console.log(res);
        data.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}


</script>














<style scoped></style>